<template>
  <van-field
    class="any-input"
    v-model="elValue"
    :type="elType"
    :maxlength="elMaxlength"
    :placeholder="placeholder"
    :disabled="disabled"
    :readonly="readonly"
    @input="changeClick"
  ></van-field>
</template>

<script>
import api from "@/api/api";
import { Field } from "vant";
export default {
  components: {
    "van-field": Field
  },

  props: {
    obj: {// InputObj
      type: Object,
      default: function () {
        return api.createInputObj();
      }
    },

    objKey: {// 数据对应InputObj的key值
      type: String,
      default: ""
    },

    prefix: {// 提示的文本内容
      type: String,
      default: null
    },

    type: {// text、integer、number、integerAll、numberAll、password、passwordNumber、phone、carNumber、idCard、email、http、https
      type: String,
      default: "text"
    },

    lines: {// 行数
      type: Number,
      default: 1
    },

    placeholder: {// 输入框为空时的提示文字
      type: String,
      default: null
    },

    minlength: {// 数据的最小长度
      type: Number,
      default: 0
    },

    maxlength: {// 数据的最大长度
      type: Number,
      default: 140
    },

    disabled: {// 是否不可用
      type: Boolean,
      default: false
    },

    readonly: {// 是否只读
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      elValue: null,
      timer: null
    }
  },

  computed: {
    elType() {
      if (this.lines > 1) {
        return "textarea";
      }
      if (this.type == "integer" || this.type == "number" || this.type == "integerAll" || this.type == "numberAll" || this.type == "phone") {
        return "number";
      }
      if (this.type == "password" || this.type == "passwordNumber") {
        return "password";
      }
      return "text";
    },

    elMaxlength() {
      if (this.type == "phone") {
        return 11;
      }
      return this.maxlength;
    }
  },

  watch: {
    obj() {
      this.register();
    },

    objKey() {
      this.register();
    },

    type() {
      this.changeClick(null);
    }
  },

  mounted() {
    this.register();
  },

  destroyed() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
    this.obj._unRegister(this.objKey);
  },

  methods: {
    register() {
      let self = this;
      this.obj._watch(this.objKey, function (value) {
        self.elValue = value;
      }, function (value) {
        if (typeof value == "string") {// 超过最大长度
          if (self.type != "text") {
            value = value.trim();
          }
          if (value.length > self.elMaxlength) {
            value = value.substring(0, self.elMaxlength);
          }
        }
        return value;
      });
      this.obj._register(this.objKey, function () {
        return self.checkData(self.obj[self.objKey], self.type, self.minlength, self.prefix ? self.prefix : "内容");
      });
    },

    checkData(data, type, minlength, prefix) {
      if (type == "passwordNumber") {
        type == "number";
      }
      let result = api.verifyData(data, type);
      if (result.data == null || result.data.length < 1) {
        if (minlength > 0) {// 非空判断
          api.toast("请输入" + prefix);
          return false;
        }
        return true;
      }
      if (result.data.length < minlength) { // 最小长度判断
        api.toast(prefix + "至少需要输入" + minlength + "位");
        return false;
      }
      if (!result.success) {
        if (type == "integer") {
          api.toast(prefix + "只能输入正整数");
        } else if (type == "number") {
          api.toast(prefix + "只能输入正数");
        } else if (type == "integerAll") {
          api.toast(prefix + "只能输入整数");
        } else if (type == "numberAll") {
          api.toast(prefix + "只能输入数字");
        } else if (type == "phone") {
          api.toast(prefix + "的输入格式不正确");
        } else if (type == "carNumber") {
          api.toast(prefix + "的输入格式不正确");
        } else if (type == "idCard") {
          api.toast(prefix + "的输入格式不正确");
        } else if (type == "email") {
          api.toast(prefix + "的输入格式不正确");
        } else if (type == "http") {
          api.toast(prefix + "需要以http://或者https://为开头");
        } else if (type == "https") {
          api.toast(prefix + "需要以https://为开头");
        }
        return false;
      }
      return true;
    },

    changeClick(value) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {// 添加防抖处理
        this.timer = null;
        this.obj[this.objKey] = value;
        this.$emit("change", value);
      }, 300);
    }
  }
}
</script>

<style scoped>
.any-input {
  width: 3.5rem;
  padding: 0.08rem;
  font-size: 0.3rem;
}
</style>